<template>
    <view>
        <!--页面标题头begin-->
        <view class="smart-page-head">
            <view class="smart-page-head-title">button按钮</view>
        </view>
        <!--页面标题头end-->
        <view>
            <button type="primary">页面主操作 normal</button>
            <button class="btn" type="primary" :loading="isloading" @click="btnSave">页面主操作 loading</button>
            <button type="default" disabled="false">页面次操作</button>
            <button type="warn">警告操作 warn</button>
            <button type="primary" plain="true">缓空按钮 plain</button>
            <button type="primary" size="mini" class="minburn">mini按钮</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                isLoading: false
            }
        },
        methods: {
            btnSave() {
                this.isLoading = true;
                uni.showLoading({
                    title: "数据加载中..."
                });
                setInterval(() => {
                    this.isLoading = false;
                    uni.hideLoading();
                }, 5000)
            }
        }
    }
</script>

<style>
	/*表示当前页面所有button标签*/
	button {
		margin: 30upx;
	}
 
	.btn {
		margin: 10upx;
	}

	.minbutn {
		background-color: #4CD964;
		color: #333333;
		width: 200upx;
	}
</style>

